<template>
	<view class="material-paths b-f">
		<view class="back" v-if="path.parents && path.parents.length > 1">
			<text @click.stop.prevent="openDir({id: path.dir.parentId})">返回上一级</text>
		</view>
		<template v-for="(p,i) in path.parents">
			<view :key="i" class="path-item"
				:class="{'first-item': (i !== (path.parents.length - 1) && !i), 'last-item':(i === (path.parents.length - 1))}">
				<text @click.stop.prevent="openDir(p)">{{p.name}}</text>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "material-paths",
		props: {
			path: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			openDir: function(dir) {
				this.$emit('material:open', dir)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.material-paths {
		padding: 20rpx;
		border-bottom: 1px solid transparent;
		position: relative;

		.back {
			border-right: 1px solid #cad5e3;
			color: #3083eb;
			margin: 0 6px 0 0;
			padding-right: 12px;
		}

		.path-item {
			color: #3083eb;
			margin: 0 6px 0 0;
			max-width: 40%;
			overflow: hidden;
			padding-right: 12px;
			text-overflow: ellipsis;
			white-space: nowrap;
			position: relative;
		}
	}
</style>
